<template>
  <!-- 电能 -->
  <div style="float: left;margin-left: 1vh;width: 99%;text-align: left;">
    <div class="electric-mode">
      <el-row style="margin-top: 40px;">
        <el-col :span="2">
          <p style="text-align: right;">
            <span style="font-size: 32px;color: #FF9D00;">峰</span>
          </p>
        </el-col>
        <el-col :span="22">
          <el-form ref="form" :model="form" label-width="200px" label-suffix=":" align="left" :inline="true" style="color: #FFFFFF;">
            <el-form-item label="峰时段">
              <el-col :span="11">
                <el-time-select placeholder="    开始时间" v-model="form.fengStartTime" style="width: 100%;"
                  :picker-options="{
                  start: '00:00',
                  step: '01:00',
                  end: '24:00'
                }"></el-time-select>
              </el-col>
              <el-col :span="2">
                <span style="margin-left: 15px;">~</span>
              </el-col>
              <el-col :span="11">
                <el-time-select placeholder="    结束时间" v-model="form.fengEndTime" style="width: 100%;" :picker-options="{
                  start: '00:00',
                  step: '01:00',
                  end: '24:00',
                  minTime: form.fengStartTime
                }"></el-time-select>
              </el-col>
            </el-form-item>
            <el-form-item label="峰时电价">
              <label slot="label" style="color: white;">峰时电价:</label>
              <el-input v-model="form.fengPrice" placeholder="峰时电价" style="width: 100%;">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">元/kws</i>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <hr />

    <div class="electric-mode">
      <el-row>
        <el-col :span="2">
          <p style="text-align: right;">
            <span style="font-size: 32px;color: #00D1F3;">平</span>
          </p>
        </el-col>
        <el-col :span="22">
          <el-form ref="form" :model="form" label-width="200px" label-suffix=":" align="left" :inline="true" style="color: #FFFFFF;">
            <el-form-item label="平时段">
              <el-col :span="11">
                <el-time-select placeholder="    开始时间" v-model="form.pingStartTime" style="width: 100%;" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '24:00'
                      }"></el-time-select>
              </el-col>
              <el-col :span="2">
                <span style="margin-left: 10px;">~</span>
              </el-col>
              <el-col :span="11">
                <el-time-select placeholder="    结束时间" v-model="form.pingEndTime" style="width: 100%;" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '24:00',
                        minTime: form.pingStartTime
                      }"></el-time-select>
              </el-col>
            </el-form-item>
            <el-form-item label="平时电价">
              <el-input v-model="form.pingPrice" placeholder="峰时电价" style="width: 100%;">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">元/kws</i>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <hr />

    <div class="electric-mode">
      <el-row>
        <el-col :span="2">
          <p style="text-align: right;">
          <span style="font-size: 32px;color: #00FF50;">谷</span>
          </p>
        </el-col>
        <el-col :span="22">
          <el-form ref="form" :model="form" label-width="200px" label-suffix=":" align="left" :inline="true" style="color: #FFFFFF;">
            <el-form-item label="谷时段">
              <el-col :span="11">
                <el-time-select placeholder="    开始时间" v-model="form.guStartTime" style="width: 100%;" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '24:00'
                      }"></el-time-select>
              </el-col>
              <el-col :span="2">
                <span style="margin-left: 10px;">~</span>
              </el-col>
              <el-col :span="11">
                <el-time-select placeholder="    结束时间" v-model="form.guEndTime" style="width: 100%;" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '24:00',
                        minTime: form.guStartTime
                      }"></el-time-select>
              </el-col>
            </el-form-item>
            <el-form-item label="谷时电价">
              <el-input v-model="form.guPrice" placeholder="谷时电价" style="width: 100%;">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">元/kws</i>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <hr />

    <div class="electric-mode">
      <el-row>
        <el-col :span="2">
          <p style="text-align: right;">
          <span style="font-size: 32px;color: #FF0000;">尖</span>
          </p>
        </el-col>
        <el-col :span="22">
          <el-form ref="form" :model="form" label-width="200px" label-suffix=":" align="left" :inline="true" style="color: #FFFFFF;">
            <el-form-item label="尖时段">
              <el-col :span="11">
                <el-time-select placeholder="    开始时间" v-model="form.jianStartTime" style="width: 100%;" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '24:00'
                      }"></el-time-select>
              </el-col>
              <el-col :span="2">
                <span style="margin-left: 10px;">~</span>
              </el-col>
              <el-col :span="11">
                <el-time-select placeholder="    结束时间" v-model="form.jianEndTime" style="width: 100%;" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '24:00',
                        minTime: form.jianStartTime
                      }"></el-time-select>
              </el-col>
            </el-form-item>
            <el-form-item label="尖时电价">
              <el-input v-model="form.jianPrice" placeholder="尖时电价" style="width: 100%;">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">元/kws</i>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <hr />
    <el-button style="float: right;margin-right: 4vh;margin-top: 4vh;" type="primary" @click="save">保存</el-button>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        project_id: this.$root.project_id,
        form: {
          fengStartTime: '',
          fengEndTime: '',
          fengPrice: '',
          pingStartTime: '',
          pingEndTime: '',
          pingPrice: '',
          guStartTime: '',
          guEndTime: '',
          guPrice: '',
          jianStartTime: '',
          jianEndTime: '',
          jianPrice: '',
        }
      }
    },
    methods: {
      save() {
        console.log(this.project_id);
        this.$http.post('/iepsapi/resource/saveElectric', [{
          project_id: this.project_id,
          electric_name: '峰',
          start_time: this.form.fengStartTime,
          end_time: this.form.fengEndTime,
          price: this.form.fengPrice
        }, {
          project_id: this.project_id,
          electric_name: '平',
          start_time: this.form.pingStartTime,
          end_time: this.form.pingEndTime,
          price: this.form.pingPrice
        }, {
          project_id: this.project_id,
          electric_name: '谷',
          start_time: this.form.guStartTime,
          end_time: this.form.guEndTime,
          price: this.form.guPrice
        }, {
          project_id: this.project_id,
          electric_name: '尖',
          start_time: this.form.jianStartTime,
          end_time: this.form.jianEndTime,
          price: this.form.jianPrice
        }]).then((res) => {
          console.log(res);
          if (res.data.flag) {
            this.$message({
              type: 'success',
              message: res.data.message
            });
          } else {
            this.$message.error(res.data.message);
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped="scoped">
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  hr {
    margin-top: 40px;
    margin-bottom: 40px;
  }

</style>
